<template>
  <div class="textarea-wrapper">
    <div class="textarea-mutable" :class="`circle-${type}`">
      <div class="mask" v-if="!isLogin" @click="goLogin"></div>
      <el-input
        :type="type"
        autosize
        :minlength="1"
        :maxlength="maxLength"
        :placeholder="placeholder"
        v-model="textarea"
      ></el-input>
      <edu-upload
        v-if="showUpload"
        :args="argsMaterial"
        :value.sync="attachList"
        field="circle"
        ref="circleUpload"
      ></edu-upload>
    </div>
    <div class="textarea-btn">
      <el-button type="primary" size="mini" :disabled="disabledValue" @click="handleSubmit">{{
        btnText
      }}</el-button>
    </div>
  </div>
</template>

<script>
import EduUpload from '@/components/EduUpload'
import { mapGetters } from 'vuex'
export default {
  components: {
    EduUpload
  },
  props: {
    type: {
      type: String,
      default: 'text'
    },
    // 是否显示上传
    showUpload: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    // 按钮文字
    btnText: {
      type: String,
      default: ''
    },
    maxLength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      textarea: '',
      argsMaterial: {
        limit: 9,
        upload_type: 'pictureCard'
      },
      attachList: []
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'user/isLogin'
    }),
    disabledValue() {
      return this.textarea.trim().length < 1
    }
  },
  methods: {
    // 去登录
    goLogin() {
      this.$globalToLogin(() => {})
    },
    handleSubmit() {
      this.$emit('click', {
        content: this.textarea.trim(),
        attach: this.attachList
      })
      setTimeout(() => {
        this.textarea = ''
        this.attachList = []
        this.$refs.circleUpload.clearFiles()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.textarea-wrapper {
  .textarea-mutable {
    position: relative;
    &.circle-textarea {
      padding: 20px 15px;
      border: 1px solid #e4e7ed;
      ::v-deep .el-textarea {
        .el-textarea__inner {
          padding: 0;
          border: none;
        }
      }
    }
    &.circle-text {
      ::v-deep .el-input__inner {
        background-color: transparent;
      }
    }
    ::v-deep .edu-form-upload {
      margin-top: 20px;
      max-width: 100%;
      .el-upload-list--picture-card .el-upload-list__item {
        width: 80px;
        height: 80px;
      }
      .el-upload--picture-card {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 0;
        .avatar-uploader-icon {
          font-size: 16px;
        }
      }
    }

    .mask {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 9;
    }
  }
  .textarea-btn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    .el-button {
      &.is-disabled,
      &.is-disabled:active,
      &.is-disabled:focus,
      &.is-disabled:hover {
        background-color: #b7bac1;
        border-color: #b7bac1;
      }
    }
  }
}
</style>
